<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ClickOutside</title>
    <style>
      .input {
        width: 200px;
        height: 24px;
        box-sizing: border-box;
      }
      .popover {
        width: 200px;
        height: 100px;
        background-color: green;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <input type="text" class="input" />
    <div class="popover"></div>
    <button id="btn">卸载</button>
    <script type="module">
      import { ClickOutside } from './ClickOutside.js';

      const input = document.querySelector('.input');
      const popover = document.querySelector('.popover');
      const callback = () => {
        console.log('调用callback');
      };
      const instance = new ClickOutside([input, popover], callback, true);

      const btn = document.querySelector('#btn');
      btn.addEventListener('click', () => {
        instance.offEvent();
      });
    </script>
  </body>
</html>
